<html>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
    <style type="text/css">
      <!--
      span.cls_002 {
        font-family: Arial, serif;
        font-size: 17.9px;
        color: rgb(33, 33, 33);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }
     
      div.cls_002 {
        font-family: Arial, serif;
        font-size: 17.9px;
        color: rgb(33, 33, 33);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_003 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(153, 153, 153);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_003 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(153, 153, 153);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_004 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_004 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_005 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(102, 102, 102);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_005 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(102, 102, 102);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_006 {
        font-family: Arial, serif;
        font-size: 11.2px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_006 {
        font-family: Arial, serif;
        font-size: 11.2px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_007 {
        font-family: Arial, serif;
        font-size: 17.9px;
        color: rgb(84, 115, 161);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_007 {
        font-family: Arial, serif;
        font-size: 17.9px;
        color: rgb(84, 115, 161);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_008 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_008 {
        font-family: Arial, serif;
        font-size: 10.5px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_009 {
        font-family: Arial, serif;
        font-size: 9.7px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }
      body {
            background-color: #e6e6e6;
        }
      div.cls_009 {
        font-family: Arial, serif;
        font-size: 9.7px;
        color: rgb(68, 68, 68);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_010 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_010 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      span.cls_011 {
        font-family: Arial, serif;
        font-size: 9.7px;
        color: rgb(68, 68, 68);
        font-weight: bold;
        font-style: normal;
        text-decoration: none
      }

      div.cls_011 {
        font-family: Arial, serif;
        font-size: 9.7px;
        color: rgb(68, 68, 68);
        font-weight: bold;
        font-style: normal;
        text-decoration: none
      }

      span.cls_012 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(153, 153, 153);
        font-weight: bold;
        font-style: normal;
        text-decoration: none
      }

      div.cls_012 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(153, 153, 153);
        font-weight: bold;
        font-style: normal;
        text-decoration: none
      }

      span.cls_013 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(153, 153, 153);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }

      div.cls_013 {
        font-family: Arial, serif;
        font-size: 9.0px;
        color: rgb(153, 153, 153);
        font-weight: normal;
        font-style: normal;
        text-decoration: none
      }
      div#chartContainer {
        height: 200px;
        width: 100%;
        margin-left: -365px;
        margin-top: -114px;
    }
    a.canvasjs-chart-credit {
        display: none;
    }
    .box {
        float: left;
        height: 20px;
        width: 20px;
        margin-bottom: 15px;
        border: 1px solid black;
        clear: both;
        border-radius: 20%;
    }
    div#firstDivsub {
        margin-top: -3px;
        margin-left: -58px;
    }

    .red {background-color: #38b789;}
    .green {background-color: #fa8662;}
    .blue {background-color: #f9e67e;}
    .darkblue{background-color: #11a8eb;}
    .darkgreen{background-color: #3a5768;}
    .grey{background-color: #dfe3e4;}

    /* .image1{background-image: url("Images/firstImage.png");} */
    .image2{}
    .image3{}

    .box ,.box1{
        float: left;
        height: 10px;
        width: 10px;
        clear: both;
        margin-right: 6px;
        margin-left: 20px;
        border: none;
    }
    hr {
        height: 1px;
        border-width: 0;
        color: #80808029;
        background-color: #80808036;
        width: 525%;
    }
    canvas.canvasjs-chart-canvas {
        width: 558px;
        height: 200px;
        position: absolute;
        user-select: none;
    }
    
    /* div {
        background-color: white;
    } */
    div#firstDiv {
        margin-left: -51px;
        line-height: 12px;
        margin-top: -7px;
    }
    img {
        height: 12px;
    }
    div#chartContainerThird {
    margin-top: 5px;
    margin-left: 7px;
}
    @media print {
        hr { display:block; }
    }

    </style>
    <script type="text/javascript" src="canvasjs/canvasjs.min.js"></script>
    <script type="text/javascript" src="canvasjs/jquery.canvasjs.min.js"></script>
    <script type="text/javascript" src="canvasjs/html2canvas.js"></script>
    <script type="text/javascript" src="ZohoReport/wz_jsgraphics.js"></script>

    
    <?php
        $dataPoints1Chart1 = array(array("label" => "",  "y" => 50 ),);
        $dataPoints2Chart1 = array(array("label" => "",  "y" => 25 ),);
        $dataPoints3Chart1 = array(array("label" => "",  "y" => 13 ),);

        $dataPoints1Chart2 = array(array("label" => "",  "y" => 68 ),);
        $dataPoints2Chart2 = array(array("label" => "",  "y" => 20),);

        $dataPoints1Chart3 = array(array("label" => "",  "y" => 50,"color" =>"#3a5768" ),);
      
    ?>

    <script>
        window.onload = function() {
            CanvasJS.addColorSet("FirstChart",
                ["#38b789",
                "#fa8662",
                "#f9e67e",              
                ]);
            CanvasJS.addColorSet("SecondChart",
                ["#11a8eb",
                "#dfe3e4"           
                ]);

            CanvasJS.addColorSet("ThirdChart",
                ["#11a8eb",
                "#dfe3e4"           
                ]);
            
            var chart = new CanvasJS.Chart("chartContainer", {
                colorSet: "FirstChart",
                
                animationEnabled: true,
                toolTip: {
                    enabled:false
                },
                width:530,
                backgroundColor: "#f0f8ff00",
                axisX:{
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                        return "";
                    }
                },
                axisY:{
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                        return "";
                    }
                },
               
                data: [{
                    type: "stackedBar100",
                    name: "More than Once a day",
                    yValueFormatString: "#,##0\"%\"",
                    dataPoints: <?php echo json_encode($dataPoints1Chart1, JSON_NUMERIC_CHECK); ?>
                },{
                    type: "stackedBar100",
                    yValueFormatString: "#,##0\"%\"",
                    name: "Daily",
                    
                    dataPoints: <?php echo json_encode($dataPoints2Chart1, JSON_NUMERIC_CHECK); ?>
                },{
                    type: "stackedBar100",
                    yValueFormatString: "#,##0\"%\"",
                    name: "Weekly",
                    dataPoints: <?php echo json_encode($dataPoints3Chart1, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();

            // second chart

            var chart = new CanvasJS.Chart("chartContainerSecond", {
                colorSet: "SecondChart",
                animationEnabled: true,
                toolTip: {
                    enabled:false
                },
                width:530,
                backgroundColor: "#f0f8ff00",
                axisX:{
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                    return " ";
                    }
                },
                axisY:{
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                    return " ";
                    }
                },
                data: [{
                    type: "stackedBar100",
                    name: "More than Once a day",
                    yValueFormatString: "#,##0\"%\"",
                    dataPoints: <?php  echo json_encode($dataPoints1Chart2, JSON_NUMERIC_CHECK); ?>
                },{
                    type: "stackedBar100",
                    yValueFormatString: "#,##0\"%\"",
                    name: "Daily",
                    
                    dataPoints: <?php echo json_encode($dataPoints2Chart2, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
            
            // Third Chart
            var chart = new CanvasJS.Chart("chartContainerThird", {
                colorset:"ThirdChart",
                animationEnabled: true,
                width:397, //Depends on the value of Unique Opens
                theme: "dark",
                backgroundColor: "#11a8eb",
                 axisX:{
                    margin: -10,
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                    return "";
                    }
                },
                axisY:{
                    gridThickness: 0,
                    tickLength: 0,
                    lineThickness: 0,
                    valueFormatString:" ",
                    labelFormatter: function(){
                    return "";
                    }
                },
                data:[{
                    type: "stackedBar",
                    dataPoints: <?php echo json_encode($dataPoints1Chart3, JSON_NUMERIC_CHECK); ?>
                    }]
            });
            chart.render();
        }   

        </script>
      
  </head>
  <body>
    <div style="position:absolute;left:50%;margin-left:-297px;top:21px;width:594px;height:840px;border-style:outset;overflow:hidden;background-color: white">
      <div style="position:absolute;left:0px;top:0px">
        <img src="Images/background2.jpg" width=594 height=840>
      </div>
      <div style="position:absolute;left:29.75px;top:45.15px" class="cls_002">
        <span class="cls_002">iMailframe</span>
      </div>
      <div style="position:absolute;left:29.75px;top:89.78px" class="cls_003">
        <span class="cls_003">Campaign:</span>
        <span class="cls_004">New Year Elituzz Wishes</span>
      </div>
      <div style="position:absolute;left:29.75px;top:115.81px" class="cls_003">
        <span class="cls_003">Sent to :</span>
        <span class="cls_004"> Elitbuzz Clients</span>
        <span class="cls_005">(List)</span>
      </div>
      <div style="position:absolute;left:29.75px;top:141.84px" class="cls_003">
        <span class="cls_003">Sent on :</span>
        <span class="cls_004"> Jan 01, 2021 12:00 AM GST</span>
      </div>
      <div style="position:absolute;left:29.75px;top:167.87px" class="cls_003">
        <span class="cls_003">Reply to :</span>
        <span class="cls_004"> e.marketing@imailframe.com</span>
      </div>
      <div style="position:absolute;left:29.75px;top:217.70px" class="cls_006">
        <span class="cls_006">REPORT SUMMARY</span>
        <hr style="height:1px;border-width:0;color:#80808029;background-color:#80808029">
      </div>
      
      <div style="position:absolute;left:281.88px;top:263.82px" class="cls_007">
        <span class="cls_007">107</span>
      </div>
      <div style="position:absolute;left:255.11px;top:303.23px" class="cls_008">
        <span class="cls_008">Total Emails Sent</span>
      </div>
      <div style="position:absolute;left:223.87px;top:318.11px" class="cls_009">
        <span class="cls_009">Sent onJan 01, 2021 12:00 AM GST</span>
      </div>
      <div style="position:absolute;left:438.07px;top:349.32px" class="cls_010">
        <span class="cls_010">[ 66.4% + 33.6% + 0.0% ]</span>
      </div>
    
      <!-- Added CanavsJS  -->
      <div style="position:absolute;left:397.07px;top:400.32px" class="cls_010">
      <div id="chartContainer" style="height: 200px; width: 100%;"></div>
      </div>
  
      <div id="firstDiv" style="position:absolute;left:76.61px;top: 428.26px;" class="cls_009">
      <div class='box red'></div><span class="cls_009">Delivered </span>
        <span class="cls_011">66.4%</span>
      </div>
      <div   id="firstDiv" style="position:absolute;left:291.67px;top: 428.26px;" class="cls_009">
      <div class='box green'></div><span class="cls_009">Bounces </span>
        <span class="cls_011">33.6%</span>
      </div>
      <div  id="firstDiv" style="position:absolute;left:504.29px;top: 428.26px;" class="cls_009">
      <div class='box blue'></div><span class="cls_009">Unsent </span>
        <span class="cls_011">0.0%</span>
      </div>
      <div  id="firstDivsub" style="position:absolute;left:119.61px;top:443.39px" class="cls_012">
        <span class="cls_012">71</span>
        <span class="cls_013"> Contacts</span>
      </div>
      <div  id="firstDivsub" style="position:absolute;left:334.67px;top:443.39px" class="cls_012">
        <span class="cls_012">36</span>
        <span class="cls_013"> Contacts</span>
      </div>
      <div  id="firstDivsub" style="position:absolute;left:548.29px;top:443.39px" class="cls_012">
        <span class="cls_012">0</span>
        <span class="cls_013"> Contact</span>
      </div>
      <div style="position:absolute;left:443.82px;top:483.35px" class="cls_010">
        <span class="cls_010">[ 12.7% + 87.3% ]</span>
      </div>

      <!-- adding Canvas -->

      <div style="position:absolute;left:32.07px;top:400.32px" class="cls_010">
      <div id="chartContainerSecond" style="margin-top:20px;height: 200px; width: 100%;"></div>
      
      </div>
      <div style="position:absolute;left:32.07px;top:500.32px;height: 20px;" class="cls_010">
        <div id="chartContainerThird" style="height: 22px; width: 100%;"></div>
      </div>

      <div id ="MyCentreDiv">
        <div style="position:absolute;left:25.61px;top:553.98px" class="cls_009">
        <div class='box darkblue'></div><span class="cls_009">Unique Opens </span>
            <span class="cls_011">12.7%</span>
        </div>
        <div style="position:absolute;left:240.82px;top:553.98px" class="cls_009">
        <div class='box darkgreen'></div><span class="cls_009">Unique Clicks </span>
            <span class="cls_011">0.0%</span>
        </div>
        <div style="position:absolute;left:442.04px;top:553.98px" class="cls_009">
        <div class='box grey'></div><span class="cls_009">Unopened </span>
            <span class="cls_011">87.3%</span>
        </div>
        <div style="position:absolute;left:60.61px;top: 571.11px;" class="cls_012">
            <span class="cls_012">9</span>
            <span class="cls_013"> Contacts</span>
        </div>
        <div style="position:absolute;left:276.82px;top: 571.11px;" class="cls_012">
            <span class="cls_012">0</span>
            <span class="cls_013"> Contact</span>
        </div>
        <div style="position:absolute;left:479.04px;top: 571.11px;" class="cls_012">
            <span class="cls_012">62</span>
            <span class="cls_013"> Contacts</span>
        </div>
        <div style="position:absolute;left:25.61px;top:612.99px" class="cls_009">
        <div class='box1'><img src="Images/firstImage.png"/></div><span class="cls_009">Clicks / Open Rate </span>
            <span class="cls_011">0.0%</span>
        </div>
        <div style="position:absolute;left:240.82px;top:612.99px" class="cls_009">
        <div class='box1'><img src="Images/secondImage.png"/></div><span class="cls_009">Unsubscribes </span>
            <span class="cls_011">1.4%</span>
        </div>
        <div style="position:absolute;left:442.04px;top:612.99px" class="cls_009">
            <div class='box1'><img src="Images/thirdimage.png"/></div><span class="cls_009">Complaints </span>
            <span class="cls_011">0.0%</span>
        </div>
        <div style="position:absolute;left: 62.61px;top: 628.89px" class="cls_009">
            <span class="cls_012">1</span>
            <span class="cls_013"> Contact</span>
        </div>
        <div style="position:absolute;left:276.82px;top:628.89px" class="cls_012">
            <span class="cls_012">1</span>
            <span class="cls_013"> Contact</span>
        </div>
        <div style="position:absolute;left:479.04px;top:628.89px" class="cls_012">
            <span class="cls_012">0</span>
            <span class="cls_013"> Contact</span>
        </div>
        </div>
    </div>
    <!-- <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> -->

  </body>
</html>